<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <p>FullName: {{fullName}}</p>
    <p>FirstName: <input type="text" v-model="firstName"></p>
    <p>个人信息<input type="text" v-model="person.age"></p>
    <p>个人信息<input type="text" v-model="person.sex"></p>
  </div>
  <!-- 导入js文件 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el: "#app",
      data: {
        firstName: '顿',
        lastName: '健康',
        fullName: '',
        person:{
          age:18,
          sex:"男"
        }
      },
      watch: {
        // 只有在内容改变的时候才会触发,所以这里只能输入姓
        // 因为这里是监听firstName,只要它改变,内部的函数就会执行
        // 之前没有注意到的watch的新的用法,监听,挺好用的
        // new就是新注入的那个值,old就是原有的值
        firstName(newName, oldName) {
          this.fullName = newName + '' + this.lastName
          console.log(newName);
          console.log(oldName);
        },
        person: {
          deep: true,
          // 深度监听,经过handler一处理,只剩一个最新的值了
          // 旧的值没有了
          handler(newmsg , oldmsg){
            console.log('个人信息内容发生改变了');
            console.log(oldmsg);
            console.log(newmsg);
          }
        }
      },
      methods: {
      }
    });
  </script>
</body>

</html>